import { type FC } from 'react';
import { View } from 'react-native';
import { useSafeAreaInsets } from 'react-native-safe-area-context';
import Space from '../../../Space';
import Button from './button';
import styles from './styles';
import type { ConfirmProps } from '../..//types';


const Sheet: FC<ConfirmProps> = (props) => {
  const {  onBtnClose, buttons = [] } = props;
  const { bottom } = useSafeAreaInsets();

  const wrapperStyles = [
    styles.wrapper,
    { paddingBottom: bottom }
  ];

  return (
    <View style={wrapperStyles}>
      <View style={styles.content}>
        <Space
          size={12}
          direction="vertical"
        >
          <Space
            size={1}
            direction="vertical"
          >
            {buttons.map(item => {
              const onPress = async () => {
                const close = await item.onPress?.();
                if (close ?? true) onBtnClose();
              }
              return (
                <Button
                  {...item}
                  key={item.key}
                  onPress={onPress}
                />
              );
            })}
          </Space>
          <Button
            title="Cancel"
            onPress={onBtnClose}
          />
        </Space>
      </View>
    </View>
  );
}

export default Sheet;